<template>
    <view class="content" :style="{ '--color': color }" :class="{ 'p-bot300': pageData.length > 3 && status == 1 }">
        <status-bar title="我的仓库" :back="back"></status-bar>

        <view class="row bgWhite j-sa">
            <view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{ active: status == 1 }" @click="switchTab(1)">待使用({{ nums.un_use_num }})</view>

            <view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{ active: status == 3 }" @click="switchTab(3)">待发货({{ nums.delivery_num }})</view>
            <view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{ active: status == 4 }" @click="switchTab(4)">待收货</view>
            <view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{ active: status == 2 }" @click="switchTab(2)">已使用</view>
        </view>

        <block v-for="(item, index) in pageData" :key="index">
            <view class="List" @click="toUrls(item)">
                <!-- slect_active  :class="{slect_active:ids.indexOf(item.id) != -1}"-->
                <view
                    class="slect_btn d-flex a-center j-centert f-shrink-0"
                    v-if="ines"
                    :class="{ slect_active: item.Select, noselect: multiple_orders == 0 && curretnOrder && item.ordcode != curretnOrder }"
                >
                    <view class="iconfont icon-xuanzhong size26"></view>
                </view>
                <view class="ConBox p-re">
                    <view class="row bot topList j-sb a-center">
                        <view class="color_33 h6 bold" v-if="status == 1">购买时间：{{ item.order_date }}</view>
                        <view class="color_33 h6 bold" v-if="status == 3">申请时间：{{ item.delivery.own_date }}</view>
                        <view class="color_33 h6 bold" v-if="status == 4">发货时间：{{ item.delivery.send_date }}</view>
                        <view class="color_33 h6 bold" v-if="status == 2">收货时间：{{ item.delivery.confirm_date ? item.delivery.confirm_date : item.used_date }}</view>
                        <text class="size26 bold t-letter2" :style="{ color: color }" v-if="status == 1">待使用</text>
                        <text class="size26 bold t-letter2" :style="{ color: color }" v-if="status == 2">已使用</text>
                        <text class="size26 bold t-letter2" :style="{ color: color }" v-if="status == 3">待发货</text>
                        <text class="size26 bold t-letter2" :style="{ color: color }" v-if="status == 4">待收货</text>
                    </view>

                    <view class="listContetn">
                        <view class="product_Img p-re f-shrink-0 f-gorw0">
                            <image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="wh bor_radius_10"></image>
                            <view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{ item.id }}</view>
                        </view>
                        <view class="d-flex f-column j-sb m-left20 f-gorw1">
                            <view class="color_33 size30 ellipsis">{{ item.pdtname }}</view>
                            <view class="d-flex a-center" v-if="item.pdt_spec">
                                <text class="color_99 h6 f-shrink-0">规格：</text>
                                <text class="color_33 h6 bold ellipsis">{{ item.pdt_spec }}</text>
                            </view>
                            <view class="row j-sb a-center">
                                <view class="d-flex a-center">
                                    <text class="color_99 h6">数量：</text>
                                    <text class="color_33 h6 bold">X{{ item.pdt_num }}</text>
                                </view>
                                <text class="color_33 h6">{{ item.buy_store_name }}</text>
                            </view>
                        </view>
                    </view>

                    <view class="Ordernum">
                        <text class="color_80 h6">商品单号：{{ item.ordcode }}</text>
                    </view>
                    <view class="row j-end p-right20">
                        <view class="confirm flexac" v-if="item.status == 4" @click="confirmBtn(item)">确认收货</view>
                        <view class="confirm flexac" v-if="item.status == 4 || item.status == 2" @click="expressage(item)">查看物流</view>
                    </view>

                    <block v-if="item.shareState == 1">
                        <view class="shareState p-re"></view>
                        <view class="white size22 sharTxt">已分享</view>
                    </block>
                </view>
            </view>
        </block>

        <block v-if="pageData.length">
            <view class="viewbtn fixedBtn bgcolor d-flex j-centert a-center white size36 bold t-letter2" @click="ines = true" v-if="status == 1 && ines == false">{{ button }}</view>
            <view class="viewbox auto fixedBtn d-flex j-sa" v-if="ines">
                <view class="bot_btn d-flex cancel j-centert a-center size36 color_80" @click="cancelSelect()">没有想好</view>
                <view class="bot_btn d-flex f-column bgcolor j-centert a-center white" @click="nowGive()">
                    <text class="size36 bold">{{ button }}</text>
                    <text class="h6" v-if="ids.length">已选择 ({{ ids.length }})</text>
                </view>
            </view>
        </block>

        <empty v-if="!pageData.length" type="1" cat="3" msg="还没有相关数据哦~"></empty>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                imgUrl: this.imgUrl,

                ines: false,
                noData: true,
                page: 1,
                limit: 10,
                status: 1,
                pageData: [],
                ids: [], // 赠送的商品id
                statusNav: 1,
                nums: [],
                multiple_orders: 0, //是否允许多选订单（这儿的订单指的是 data.ordcode）  1允许  0否
                curretnOrder: '',
                button: '立即提货'
            };
        },
        onLoad(e) {
            let that = this;
            if (e.status) {
                that.status = e.status;
                that.statusNav = 2;
            }
        },
        onShow() {
            let that = this;
            that.getGoodsList();
        },
        methods: {
            //  进入详情
            toUrls(item) {
                if (!this.ines && this.status == 1) {
                    // 进入详情页
                    uni.navigateTo({
                        url: 'houseDetails?id=' + item.id
                    });
                    return;
                }

                if (this.ines && this.status == 1) {
                    // multiple_orders = 0: 只能选择相同订单号的订单
                    if (this.multiple_orders == 0) {
                        // 如果已经有选中的订单，检查订单号是否一致
                        if (this.curretnOrder && this.curretnOrder != item.ordcode) {
                            return this.$Toast('只能选择订单号一致的订单');
                        }

                        // 设置当前订单号（如果还没有设置的话）
                        if (!this.curretnOrder) {
                            this.curretnOrder = item.ordcode;
                        }
                    }

                    // multiple_orders = 1: 可以选择不同订单号的订单，无需额外限制

                    // 切换选中状态
                    const Index = this.pageData.findIndex((n) => n.id == item.id);
                    this.pageData[Index].Select = !this.pageData[Index].Select;

                    // 更新ids数组
                    if (this.pageData[Index].Select) {
                        if (this.ids.indexOf(item.id) == -1) {
                            this.ids.push(item.id);
                        }
                    } else {
                        const idIndex = this.ids.indexOf(item.id);
                        if (idIndex != -1) {
                            this.ids.splice(idIndex, 1);
                        }

                        // 如果multiple_orders = 0且当前项目被取消选择，检查是否还有同订单号的选中项
                        if (this.multiple_orders == 0) {
                            const hasSelectedSameOrder = this.pageData.some((pageItem) => pageItem.Select && pageItem.ordcode == this.curretnOrder);
                            if (!hasSelectedSameOrder) {
                                this.curretnOrder = '';
                            }
                        }
                    }
                }
            },

            //  立即赠送
            nowGive() {
                let that = this;
                if (that.ids.length > 0) {
                    uni.navigateTo({
                        url: 'houseDetails?ids=' + that.ids,
                        success: () => {
                            that.ines = false;
                            that.ids = [];
                            that.curretnOrder = ''; // 重置当前订单号
                            // 重置所有选中状态
                            that.pageData.forEach((item) => {
                                item.Select = false;
                            });
                        }
                    });
                } else {
                    uni.showToast({
                        title: '未选中商品~',
                        icon: 'none'
                    });
                }
            },
            // 取消选择
            cancelSelect() {
                this.ines = false;
                this.ids = [];
                this.curretnOrder = '';
                // 重置所有选中状态
                this.pageData.forEach((item) => {
                    item.Select = false;
                });
            },
            switchTab(type) {
                let that = this;
                that.noData = true;
                that.status = type;
                that.pageData = [];
                that.page = 1;
                that.getGoodsList();
            },
            getGoodsList() {
                let that = this;
                uni.showLoading({
                    title: '加载中~'
                });
                that.$http
                    .post({
                        url: '/singleSaleWarehouseApi/getMyWarehouseGoodsList',
                        data: {
                            status: that.status,
                            page: that.page,
                            limit: that.limit
                        }
                    })
                    .then((res) => {
                        uni.hideLoading();
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        const result = res.data || [];
                        result.forEach((item) => {
                            item.Select = false;
                        });
                        if (res.multiple_orders) this.multiple_orders = res.multiple_orders;
                        if (res.button) this.button = res.button;

                        this.page == 1 ? (this.pageData = result) : (this.pageData = this.pageData.concat(result));
                        if (res.num) this.nums = res.num;
                        if (result.length < this.limit) that.noData = false;
                    });
            },

            confirmBtn(item) {
                let that = this;
                that.$Modal('提示', '确认收货吗？').then((res) => {
                    if (!res) return;
                    that.$http
                        .post({
                            url: '/WaterApi/receiveGoods',
                            data: {
                                checkid: item.id
                            }
                        })
                        .then((res2) => {
                            if (res2.code != 200) return this.$Toast(res.msg);
                            const Index = this.pageData.findIndex((n) => n.id == item.id);
                            this.pageData.splice(Index, 1);
                        });
                });
            },
            expressage(item) {
                this.toUrl(`/orderPage/order/logistics?id=${item.id}&Stash=2`);
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'bid'])
        },
        onReachBottom() {
            let that = this;
            if (!that.noData) return;
            that.page++;
            that.getGoodsList();
        }
    };
</script>
<style lang="scss">
    page {
        background: #f7f9fa;
    }

    .List {
        width: 100%;

        margin: 20rpx auto 0 auto;
        // padding:0 20rpx 0 20rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
    }

    .topList {
        padding: 20rpx;
    }

    .ConBox {
        width: 690rpx;
        margin-left: 30rpx;
        background-color: #ffffff;
    }

    .listContetn {
        width: 100%;
        padding: 0 20rpx;
        display: flex;
        margin-top: 20rpx;
    }

    .Ordernum {
        width: 100%;
        padding: 20rpx;

        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
    }

    .confirm {
        width: 140rpx;
        height: 54rpx;
        border-radius: 26rpx;
        border: 1rpx solid #ddd;
        // background-color: var(--color);
        color: #333;
        font-size: 22rpx;
        margin-bottom: 20rpx;
        margin-left: 20rpx;
    }

    .bot_btn {
        width: 310rpx;
        height: 100rpx;
        border-radius: 50rpx;
        -webkit-border-radius: 50rpx;
    }

    .fixedBtn {
        position: fixed;
        bottom: 100rpx;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .icon-xuanzhong {
        color: #f7f9fa;
    }

    .rows {
        width: 100%;
        overflow: hidden;
    }

    .active {
        color: var(--color);
        font-size: 30rpx;
        font-weight: bold;
        border-bottom: 4rpx solid var(--color);
    }

    .slect_btn {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        border: 1px solid var(--color);
        margin-left: 30rpx;
    }
    .noselect {
        border: 1px solid #ccc !important;
        background-color: #ccc;
        .icon-xuanzhong {
            color: #ccc !important;
        }
    }

    .slect_active {
        background: var(--color);
        border: 1px solid var(--color);

        .icon-xuanzhong {
            color: #ffffff !important;
        }
    }

    .product_Img {
        width: 140rpx;
        height: 140rpx;
    }

    .numId {
        position: absolute;
        right: 0;
        top: 0;
        background: var(--color);
        border-radius: 0 10rpx 0 10rpx;
    }

    .fixedBtn {
        position: fixed;
        bottom: 100rpx;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .bot_btn {
        width: 310rpx;
        height: 100rpx;
        border-radius: 50rpx;
        -webkit-border-radius: 50rpx;
    }

    .cancel {
        background: #ededed;
    }

    .shareState {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 126rpx 182rpx 126rpx;
        border-color: transparent transparent var(--color) transparent;
        position: absolute;
        bottom: -25rpx;
        right: -150rpx;
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
    }

    .sharTxt {
        position: absolute;
        bottom: 28rpx;
        right: 2rpx;
        transform: rotate(-45deg);
    }
</style>
